<template>
	<div class="home">
		<a class="duzhetb" href="https://duzhe.tmall.com/">
			<img class="home-face" :src="homeImgFace.picUrl" />
		</a>

		<div class="home-mouth">
			<div class="home-mouth-1">
				<div class="num1">
					<img class="duzhe" src="../../assets/duzhe.png" />
					<img class="duzheCode" src="../../assets/duzheCode.png" />
				</div>
				<div class="home-mouth-1-content">
					<h3>读者客户端</h3>
					<p>扫描二维码,下载读者客户端</p>
				</div>
			</div>

			<div class="home-mouth-1">
				<div class="num2">
					<img class="weixin" src="../../assets/weixin.png" />
					<img class="weixinCode" src="../../assets/weixinCode.png" />
				</div>
				<div class="home-mouth-1-content">
					<h3>读者微信公众号++</h3>
					
					<p>扫描二维码,关注读者公众号</p>
				</div>
			</div>

			<div class="home-mouth-1">
				<div class="num3">
					<img class="xinlang" src="../../assets/xinlang.png" />
					<img class="xinlangCode" src="../../assets/xinlangCode.png" />
				</div>
				<div class="home-mouth-1-content">
					<h3>读者官方微博</h3>
					<p>扫描二维码,关注读者微博</p>
				</div>
			</div>
		</div>

		<div class="home-bottom">
			<div class="contact-us">
				<h1>读者平台</h1>
				<h2>Reader Platfrom</h2>
			</div>
			<!-- 图片区 -->
			<ul class="contact-N">
				<li class="contact-N1">
					<div class="contact-N1-bg">
						<img src="../../assets/tubiao1.png" />
					</div>
					<div class="contact-N1-o-parent">
						<div class="boxborder1"></div>
						<div class="contact-N1-o">

							<i>新媒体写作创作营</i>
							<ul>
								<li>系统课程讲解</li>
								<li>写作流程解密</li>
								<li>品质社群交流授课</li>
								<li>全钫位改稿计划</li>
							</ul>
						</div>
					</div>
				</li>

				<li class="contact-N2">
					<div class="contact-N2-bg">
						<img src="../../assets/tubiao2.png" />
					</div>
					<div class="contact-N2-o-parent">
						<div class="boxborder2"></div>
						<div class="contact-N2-o">
							<i>新媒体写作创作营</i>
							<ul>
								<li>系统课程讲解</li>
								<li>写作流程解密</li>
								<li>品质社群交流授课</li>
								<li>全钫位改稿计划</li>
							</ul>
						</div>
					</div>
				</li>

				<li class="contact-N3">
					<div class="contact-N3-bg">
						<img src="../../assets/tubiao3.png" />
					</div>
					<div class="contact-N3-o-parent">
						<div class="boxborder3"></div>
						<div class="contact-N3-o">
							<i>新媒体写作创作营</i>
							<ul>
								<li>系统课程讲解</li>
								<li>写作流程解密</li>
								<li>品质社群交流授课</li>
								<li>全钫位改稿计划</li>
							</ul>
						</div>
					</div>
				</li>
			</ul>
			<ul class="contact-N">
				<li class="contact-N1">
					<div class="contact-N4-bg">
						<img src="../../assets/tubiao4.png" />
					</div>
					<div class="contact-N1-o-parent">
						<div class="boxborder1"></div>
						<div class="contact-N1-o">

							<i>新媒体写作创作营</i>
							<ul>
								<li>系统课程讲解</li>
								<li>写作流程解密</li>
								<li>品质社群交流授课</li>
								<li>全钫位改稿计划</li>
							</ul>
						</div>
					</div>
				</li>

				<li class="contact-N2">
					<div class="contact-N5-bg">
						<img src="../../assets/tubiao5.png" />
					</div>
					<div class="contact-N2-o-parent">
						<div class="boxborder2"></div>
						<div class="contact-N2-o">
							<i>新媒体写作创作营</i>
							<ul>
								<li>系统课程讲解</li>
								<li>写作流程解密</li>
								<li>品质社群交流授课</li>
								<li>全钫位改稿计划</li>
							</ul>
						</div>
					</div>
				</li>

				<li class="contact-N3">
					<div class="contact-N6-bg">
						<img src="../../assets/tubiao6.png" />
					</div>
					<div class="contact-N3-o-parent">
						<div class="boxborder3"></div>
						<div class="contact-N3-o">
							<i>新媒体写作创作营</i>
							<ul>
								<li>系统课程讲解</li>
								<li>写作流程解密</li>
								<li>品质社群交流授课</li>
								<li>全钫位改稿计划</li>
							</ul>
						</div>
					</div>
				</li>
			</ul>
		</div>


		<footerA></footerA>
	</div>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		name: 'Home',
		computed: {
			...mapState(['homeImgFace'])

		},
		mounted() {
			this.queryhomeImgFace()
				.then(() => {

				})

		},
		methods: {
			...mapActions(['queryhomeImgFace'])
		}
	}
</script>

<style scoped>
	.home {
		width: 100vw;
		margin: 0;
		margin-top: 86px;

	}

	.home>.duzhetb {
		display: block;
		width: 100%;
		/* height: 500px; */
	}

	.home-face {
		width: 100%;
		height: 600px;
		/* transform: scaleY(1.2); */
	}

	.home-face:hover {
		cursor: pointer;
	}

	.home-mouth {
		width: 80vw;
		height: 160px;
		display: flex;
		align-items: center;
		left: 10vw;
		position: relative;
		background-color: white;
		box-shadow: 0 0 1px 1px rgb(245, 245, 245);
		top: -40px;
		border-radius: 2px;
	}

	.home-mouth-1:nth-of-type(3) {
		border-right: none;
	}

	.home-mouth-1 {
		width: calc(80vw / 3);
		display: flex;
		justify-content: center;
		align-items: center;
		border-right: 0.5px solid rgb(245, 245, 245);
	}

	.num1,
	.num2,
	.num3 {
		width: 80px;
		height: 80px;
	}

	.num1:hover .duzhe {
		display: none;
	}

	.num1:hover .duzheCode {
		display: block;
		cursor: pointer;
	}

	.num2:hover .weixin {
		display: none;
	}

	.num2:hover .weixinCode {
		display: block;
		cursor: pointer;
	}

	.num3:hover .xinlang {
		display: none;
	}

	.num3:hover .xinlangCode {
		display: block;
		cursor: pointer;
	}

	.duzhe {
		width: 80px;
		height: 80px;
	}

	.weixin {
		width: 80px;
		height: 80px;
	}

	.xinlang {
		width: 80px;
		height: 80px;
	}

	.duzheCode {
		width: 80px;
		height: 80px;
		display: none;
	}

	.weixinCode {
		width: 80px;
		height: 80px;
		display: none;
	}

	.xinlangCode {
		width: 80px;
		height: 80px;
		display: none;
	}

	.home-mouth-1-content {
		padding-left: 1.5vw;
	}

	/* home-bottom */
	.home-bottom {
		margin-top: 10px;
		width: 88vw;
		margin: 0 auto;
		margin-bottom: 80px;
	}

	.contact-us {
		text-align: center;
		height: 120px;
	}

	.contact-us>h1 {
		font-size: 50px;
		margin: 6px 0;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.6);
	}

	.contact-us>h2 {
		opacity: 0.1;
		font-size: 60px;
		font-weight: 500;
		z-index: -1;
		position: relative;
		top: -80px;
		letter-spacing: 6px;
	}

	.contact-N {
		margin-top: 60px !important;
		width: 70vw;
		margin: 0 auto;
		display: flex;
		padding: 0;
		justify-content: space-between;

	}

	/* 11 */
	.contact-N1 {
		list-style: none;
		background-color: white;
		width: 18vw;
		height: 18.2vw;
		overflow: hidden;
		box-shadow: 0 0 1px 2px rgb(245, 245, 245);
	}

	.contact-N1-bg {

		width: 18vw;
		height: 13vw;
		background-image: url(../../assets/img11.png);
		background-size: 25vw 18vw;
		position: relative;
	}

	.contact-N1-bg>img,
	.contact-N2-bg>img,
	.contact-N3-bg>img,
	.contact-N4-bg>img,
	.contact-N5-bg>img,
	.contact-N6-bg>img {
		width: 4vw;
		position: absolute;
		top: 4.5vw;
		left: 7vw;
	}

	.contact-N1-o>i,
	.contact-N2-o>i,
	.contact-N3-o>i {
		font-style: normal;
		display: block;
		width: 18vw;
		line-height: 5.2vw;
		text-align: center;
		font-size: 20px;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.6);
	}

	.contact-N1-o,
	.contact-N2-o,
	.contact-N3-o {
		width: 18vw;
		height: 11.2vw;
		background-color: white;
	}

	.contact-N1-o>ul,
	.contact-N2-o>ul,
	.contact-N3-o>ul {
		width: 18vw;
		height: 6vw;
		list-style-type: disc;
		padding-left: 6vw;
		font-size: 1.0vw;
		color: #808080;
	}

	.boxborder1,
	.boxborder2,
	.boxborder3 {
		margin: 0 auto;
	}

	.contact-N1-o-parent,
	.contact-N2-o-parent,
	.contact-N3-o-parent {
		font-size: 0
	}

	.contact-N1:hover .contact-N1-o-parent {
		transition: all 0.2s ease-in;
		transform: translateY(-9vw);

	}

	.contact-N1:hover .contact-N1-bg>img {
		transition: all 0.2s ease-in;
		transform: translateY(-3vw);
		width: 3vw;
		left: 7.5vw;
	}

	.contact-N1:hover .boxborder1 {
		width: 0px;
		border-top: 2.5vw solid transparent;
		border-left: 9vw solid white;
		border-right: 9vw solid white;

	}

	/* 22 */
	.contact-N2 {
		background-color: white;
		width: 18vw;
		height: 18.2vw;
		overflow: hidden;
		box-shadow: 0 0 1px 2px rgb(245, 245, 245);
	}

	.contact-N2-bg {
		width: 18vw;
		height: 13vw;
		background-image: url(../../assets/img22.png);
		background-size: 25vw 18vw;
		position: relative;
	}

	.contact-N2:hover .contact-N2-o-parent {
		transition: all 0.2s ease-in;
		transform: translateY(-9vw);

	}

	.contact-N2:hover .contact-N2-bg>img {
		transition: all 0.2s ease-in;
		transform: translateY(-3vw);
		width: 3vw;
		left: 7.5vw;
	}

	.contact-N2:hover .boxborder2 {
		width: 0px;
		border-top: 2.5vw solid transparent;
		border-left: 9vw solid white;
		border-right: 9vw solid white;

	}

	/* 33 */
	.contact-N3 {
		background-color: white;
		width: 18vw;
		height: 18.2vw;
		overflow: hidden;
		box-shadow: 0 0 1px 2px rgb(245, 245, 245);
	}

	.contact-N3-bg {
		width: 18vw;
		height: 13vw;
		background-image: url(../../assets/img33.png);
		background-size: 25vw 18vw;
		position: relative;
	}

	.contact-N3:hover .contact-N3-o-parent {
		transition: all 0.2s ease-in;
		transform: translateY(-9vw);

	}

	.contact-N3:hover .contact-N3-bg>img {
		transition: all 0.2s ease-in;
		transform: translateY(-3vw);
		width: 3vw;
		left: 7.5vw;
	}

	.contact-N3:hover .boxborder3 {
		width: 0px;
		border-top: 2.5vw solid transparent;
		border-left: 9vw solid white;
		border-right: 9vw solid white;

	}

	.contact-N4-bg {
		width: 18vw;
		height: 13vw;
		background-image: url(../../assets/img44.png);
		background-size: 25vw 18vw;
		position: relative;
	}

	.contact-N5-bg {
		width: 18vw;
		height: 13vw;
		background-image: url(../../assets/img55.png);
		background-size: 25vw 18vw;
		position: relative;
	}

	.contact-N6-bg {
		width: 18vw;
		height: 13vw;
		background-image: url(../../assets/img66.png);
		background-size: 25vw 18vw;
		position: relative;
	}

	.contact-N1:hover .contact-N4-bg>img {
		transition: all 0.2s ease-in;
		transform: translateY(-3vw);
		width: 3vw;
		left: 7.5vw;
	}

	.contact-N2:hover .contact-N5-bg>img {
		transition: all 0.2s ease-in;
		transform: translateY(-3vw);
		width: 3vw;
		left: 7.5vw;
	}

	.contact-N3:hover .contact-N6-bg>img {
		transition: all 0.2s ease-in;
		transform: translateY(-3vw);
		width: 3vw;
		left: 7.5vw;
	}
</style>
